let $font = (function(){
  let fontHtml = `<div class="dlg-box dlg-font">
  <div class="titlebar">
    <p class="title">字体</p>
    <span class="close-btn">×</span>
  </div>
  <div class="main">
    <div class="font-family"></div>
    <div class="font-style"></div>
    <div class="font-size"></div>
    <fieldset class="example">
      <legend>示例</legend>
      <p class="abyz">AaBbYyZz</p>
    </fieldset>
    <div class="root">
      <label>脚本(R):</label><br> 
      <select id="" name="">
        <option value="">中文 GB2312</option>
        <option value="">西欧语言</option>
        <option value="">希腊语</option>
        <option value="">土耳其语</option>
        <option value="">西欧字符</option>
        <option value="">西里尔文</option>
      </select>
    </div>
    <a href="http://www.baidu.com" class="moreFont"><u>显示更多字体</u></a>
    <div class="font-btn">
      <button class="font-ok">确定</button>
      <button class="font-cancel">取消</button>
    </div>
  </div>
</div>`;

  let fonts = ['Agency FB', 'Algerian', 'Arial', 'Arial Rounded MT', 'Axure Handwriting', 'Bahnschrift', 'Baskerville Old Face', 'Bauhaus 93', 'Bell MT', 'Berlin Sans FB', 'Bernard MT', 'BlackAdder ITC'],
      styles = ['常规', '斜体', '粗体', '粗斜体'],
      styles2 = ['normal', 'italic', 'bolder'],
      styles3 = [{fontStyle: 'normal'}, {fontStyle: 'italic'}, {fontWeight: 'bolder'}, {fontStyle: 'italic', fontWeight: 'bolder'}],
      sizes = ['8', '10', '12', '14', '16', '18', '20', '22', '24', '26', '28', '36', '48', '72'],
      bgarr = [0,0,0];
  let active = -1;
  let style = [{fontFamily: 'Agency FB'},{fontStyle: 'normal', fontWeight: 'normal'},{fontSize: '16px'}];
  let $text = $('textarea');

  style.map(item=>{
    if(item !== {})
      $text.css(item);
  })
  function setList(items, title, key){
    let $abyz = $('.abyz');
    $abyz.css({
      fontFamily: fonts[bgarr[0]],
      fontSize: sizes[bgarr[2]]+'px',
    });
    $abyz.css(styles3[bgarr[1]]);
    let $bar = $('<div></div>');
    let $label = $('<label></label>');
    let $input = $('<input type="text" class="font"/>')
    $label.html(title);
    if(key === 'fontFamily'){
      $input.attr('value', style[0].fontFamily);
    }else if(key === 'fontStyle'){
      if(style[1].fontStyle === 'normal' && style[1].fontWeight==='normal'){
        $input.attr('value', styles[0]);
      }else if(style[1].fontStyle !== 'normal' && style[1].fontWeight==='normal'){
         $input.attr('value', styles[1]);
      }else if(style[1].fontStyle === 'normal' && style[1].fontWeight !=='normal'){
        $input.attr('value', styles[2]);
      }else{
        $input.attr('value', styles[3]);
      }
    }else if(key === 'fontSize'){
       $input.attr('value', style[2].fontSize.slice(0,-2));
    }
    let $list = $('<ul class="list"></ul>');
    $bar.append($label, $input, $list);
    let active = -1;
    let arr = [];
    items.map((item,i)=>{
      let $item = $('<li></li>');
      $item.attr('data-id', i);
      $item.html(item);
      $list.append($item);
      arr.push($item);
      if(key === 'fontFamily' && i === bgarr[0]){
        $item.css({background: 'rgb(0,120,215)'})
      }else if(key === 'fontStyle' && i === bgarr[1]){
        $item.css({background: 'rgb(0,120,215)'})
      }else if(key === 'fontSize' && i === bgarr[2]){
        $item.css({background: 'rgb(0,120,215)'})
      }
      $item.click(()=>{ 
        if(active !== -1)
          arr[active].css({background: 'none'});
          arr[i].css({background: 'rgb(0,120,215)'});
        if(key === 'fontFamily'){
          arr[bgarr[0]].css({background: 'none'})
        }else if(key === 'fontStyle'){
          arr[bgarr[1]].css({background: 'none'})
        }else if(key === 'fontSize'){
          arr[bgarr[2]].css({background: 'none'})
        }

        active = i;
        $input.attr('value', item);
        if(key === 'fontFamily'){
          $abyz.css({fontFamily: fonts[i]});
          style[0] = {fontFamily: fonts[i]};
          bgarr[0] = active;
        }else if(key === 'fontStyle'){
          if(i === 3){ 
            $abyz.css({fontStyle: 'italic', fontWeight: 'bold'});
            style[1] = {fontStyle: 'italic', fontWeight: 'bold'};
          }else if(i ===2){
            $abyz.css({fontWeight: styles2[i], fontStyle: 'normal'});
            style[1] = {fontWeight: styles2[i], fontStyle: 'normal'};
          }else{
            $abyz.css({fontStyle: styles2[i], fontWeight: 'normal'});
            style[1] = {fontStyle: styles2[i], fontWeight: 'normal'};
          }
          bgarr[1] = active;
        }else if(key === 'fontSize'){
          $abyz.css({fontSize: sizes[i]+'px'});
          style[2] = {fontSize: sizes[i]+'px'};
          bgarr[2] = active; 
        }
        $abyz.css({key: 'italic'});
        
      })
    })

    return $bar;
  }

  function fontDlg(){
    let $body = $('body');
    let $box = $('<div class="box"></div>');
    $body.append($box);
    $box.append(fontHtml);
    let $ok = $('.font-ok');
    let $family = $('.font-family');
    let $style = $('.font-style');
    let $size = $('.font-size');
    $family.append(setList(fonts, '字体', 'fontFamily'));
    $style.append(setList(styles, '字形', 'fontStyle'));
    $size.append(setList(sizes, '字号', 'fontSize'));
    let $font = $('.dlg-font');
    let $close = $('.close-btn'),
        $cancel = $('.font-cancel');
     // 关闭对话框
    $close.click(()=>{
      $box.remove();
    });
    $cancel.click(()=>{
      $box.remove();
    });
    $ok.click(()=>{
      style.map(item=>{
        if(item !== {})
        $text.css(item);
      })
      $box.remove();
    })

  }

  return  {  fontDlg };

})()
